<template>
	<view class="page">
		<view class="posterBox" id="canvasContainer"><canvas canvas-id="myCanvas" style="width: 375px; height: 600px;" /></view>

		<!-- <view bindtap="saveShareImg" style="text-align: center;color: white;background-color:#c70109;font-size:14px;height:50px;line-height:50px;"> 保存图片到手机</view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			canvasData: {
				width: 0,
				height: 0
			},
			infoId: 0,
			ctx: {}
		};
	},
	onLoad(option) {
		this.infoId = option.infoId;
		const res = uni.getSystemInfoSync();
		console.log(uni.getSystemInfoSync().windowWidth)
		this.canvasData.width = res.windowWidth;
		this.canvasData.height = res.windowHeight;

		console.log(this.canvasData.width);
		console.log(this.canvasData.height);

		// this.drawPoster('myCanvas')
	},
	onShow() {},
	onReady() {
		this.drawPoster('myCanvas');
	},
	methods: {
		drawPoster(canvasId) {
			uni.showLoading({
				title: '生成中...',
				mask: true
			});
			var that = this;

			var cardInfo = that.data.cardInfo; //需要绘制的数据集合
			let bg_img = that.data.bg_img;

			const ctx = uni.createCanvasContext(canvasId); //创建画布
			var width = '';
			uni.createSelectorQuery()
				.select('#canvas-container')
				.boundingClientRect(function(rect) {
					var height = uni.getSystemInfoSync().windowHeight;
					var width = uni.getSystemInfoSync().windowWidth;

					ctx.setFillStyle('white');
					ctx.fillRect(0, 0, width, height);

					// 在这里设置宽的比例；
					let s_width = width / 20;
					let s_hight = height / 20;

					var font_num = 0;

					if (s_width <= 18) {
						font_num = 45; // 正文 单行显示字符长度
					} else if (s_width > 18) {
						font_num = 49; // 正文 单行显示字符长度
					}

					//姓名
					if (cardInfo.Name) {
						ctx.fillStyle = 'red';
						ctx.setFontSize(16);

						ctx.fillText(cardInfo.Name, s_width * 10, s_hight * 2.7);
						ctx.stroke();
					}

					//头像为正方形
					if (avaterSrc) {
						ctx.beginPath();
						ctx.drawImage(avaterSrc, s_width * 2, s_hight, s_hight * 3, s_hight * 3);
						ctx.restore();
					}
					//标签
					if (cardInfo.TagText) {
						ctx.setFontSize(14);
						ctx.fillText(cardInfo.TagText, s_width * 10, s_hight * 1.4);
						ctx.stroke();
					}

					//电话
					if (cardInfo.Mobile) {
						ctx.setFontSize(14);
						ctx.setFillStyle('red');

						ctx.fillText('电话 ' + cardInfo.Mobile, s_width * 10, s_hight * 4);
					}

					//福利
					if (cardInfo.CatName.length > 1) {
						let cat_name = [];
						for (var i = 0; i < cardInfo.CatName.length; i++) {
							if (cardInfo.CatName.length - 1 > i) {
								cat_name += cardInfo.CatName[i]['LiangDian'] + ' | ';
							} else {
								cat_name += cardInfo.CatName[i]['LiangDian'];
							}
						}

						ctx.setFontSize(14);
						ctx.setFillStyle('#666');
						ctx.setTextAlign('left');
						ctx.fillText(cat_name, s_width * 2, s_hight * 5);
					}

					// 介绍
					if (cardInfo.Company) {
						let [contentLeng, contentArray, contentRows] = that.textByteLength(cardInfo.Company, font_num);

						ctx.setTextAlign('left');
						ctx.setFillStyle('#000');
						ctx.setFontSize(12);
						let contentHh = s_hight * 6;
						for (let m = 0; m < contentArray.length; m++) {
							ctx.fillText(contentArray[m], s_width * 2, contentHh + 20 * m);
						}
					}

					//地址
					if (cardInfo.Address) {
						let [contentLeng, contentArr, contentRow] = that.textByteLength(cardInfo.Address, font_num);

						ctx.setFontSize(12);
						ctx.setFillStyle('green');
						ctx.setTextAlign('left');
						let contentHh = s_hight * 10;
						for (var i = 0; i < contentRow; i++) {
							ctx.fillText(contentArr[i], s_width * 2, contentHh + i * 20);
						}
						ctx.closePath();
						ctx.restore();
					}
					ctx.drawImage(bg_img, 0, s_hight * 11, s_width * 19.8, s_hight * 5.2);
					ctx.restore();

					//  绘制二维码
					if (codeSrc) {
						ctx.drawImage(codeSrc, s_width - s_width / 8, s_hight * 11.6, s_width * 5.7, s_hight * 3.3);
						ctx.setFontSize(12);
						ctx.setFillStyle('white');
						ctx.setTextAlign('left');
						ctx.fillText('微信扫码或长按识别', s_width - s_width / 10, s_hight * 15.7);
					}

					var html_con_1 = '微 信 扫 码/长 按 识 别';
					ctx.setFillStyle('white');
					ctx.setTextAlign('left');
					ctx.setFontSize(18);
					ctx.fillText(html_con_1, s_width * 7.5, s_hight * 12.1);
					ctx.closePath();

					let html_con_2 = '发布百业信息 商业广告';
					ctx.setFontSize(16);
					ctx.fillText(html_con_2, s_width * 7.5, s_hight * 13.1);
					ctx.closePath();

					let html_con_3 = '找房子、找工作、找点事。。。';
					ctx.fillText(html_con_3, s_width * 7.5, s_hight * 14.1);

					let html_com_4 = '快来百业信息小程序';
					ctx.fillText(html_com_4, s_width * 7.5, s_hight * 15.1);
					ctx.closePath();
					ctx.restore();
				})
				.exec();

			setTimeout(function() {
				ctx.draw(true, function() {
					uni.canvasToTempFilePath({
						x: 100,
						y: 200,
						width: width * 0.1,
						height: height,
						destWidth: width * 0.1,
						destHeight: height,
						canvasId: 'myCanvas',
						success(res) {
							console.log(res.tempFilePath);
						}
					});
				});
				uni.hideLoading();
			}, 2000);
		}
	}
};
</script>

<style scoped>
@import url('creadPoster.css');
</style>
